import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text, ScrollView} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize, subtime, typeOfJobObj} from '../../utils/common'

import '../newest/index.less'
import './collection.less'
import '../dynamic/index.less'

// 我的收藏
interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    currentNavId: 1, // 全部
    pageIndex: 1,
    pageSize: pageSize,
    items: [],
    totalCount: 0,
    navArr: [
      {id: 1, name: '动态'},
      {id: 2, name: '人才'},
      {id: 3, name: '招聘'},
      {id: 4, name: '课程'},
    ],
    dynamic: [],
    personnel: [],
    recruit: [],
    course: [],
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的收藏' })
    this.getUserFavorites()
  }

  getUserFavorites() {
    let {userStore} = this.props.stores
    let {pageIndex, pageSize} = this.state
    userStore.getUserFavorites({
      pageIndex,
      pageSize,
      callback: res => {
        console.log(res)
        this.setState({
          dynamic: res.dynamic,
          personnel: res.personnel,
          recruit: res.recruit,
          course: res.course,
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  changeNavId(id: any = null) {
    this.setState({
      currentNavId: id
    })
  }

  render() {
    let {currentNavId, navArr, dynamic, personnel, recruit, course} = this.state

    let tpl = null
    if (currentNavId === 1) {
      tpl =
        <View className='list-wrap'>
          {dynamic.length>0 &&
          dynamic.map(item => {
            if(item){
              return (
                <View className='item' onClick={this.handelRouter.bind(this, `/pages/dynamic/detail?id=${item.id}&isCollection=1`)}>
                  <View className='l'>
                    <Text className='title'>{item.title}</Text>
                    <Text className='date'>{subtime(item.creationTime)}</Text>
                  </View>
                  <Image src={item.logo} className='img' />
                </View>
              )
            }
          })
          }
          {dynamic.length<=0 && <View className='page-none-info'>你还没有收藏的动态信息哦~</View>}
        </View>
    }
    else if (currentNavId === 2) {
      tpl =
        <View className='list-06'>
          {personnel.length>0 &&
          personnel.map(item => {
            return(
              <View className='list-06-item'>
                <View className='item-title'>
                  <View className='title'>
                    {item.positionName}
                    <Text className='label'>{typeOfJobObj[item.typeOfJob]}</Text>
                  </View>
                </View>
                <View className='item-info'>
                  <View className='info'>
                    <Text className='i'>{item.education}</Text>
                    {/*<Text className='i'>{item.technicalTitle}</Text>*/}
                    <Text className='i'>{item.workYears}年</Text>
                  </View>
                  <View className='btn-view'
                        onClick={this.handelRouter.bind(this, `/pages/newest/personnel_detail?id=${item.id}&isCollection=1`)} >
                    查看
                  </View>
                </View>
              </View>
              )
          })
          }
          {personnel.length<=0 && <View className='page-none-info'>你还没有收藏的人才信息哦~</View>}
        </View>
    }
    else if (currentNavId === 3) {
      tpl =
        <View className='list-06'>
          {recruit.length>0 &&
          recruit.map(item => {
            return (
              <View className='list-06-item'>
                <View className='item-title'>
                  <View className='title'>
                    {item.positionName}
                    <Text className='label'>{item.jobNature}</Text>
                  </View>
                  <View className='address'>{item.address}</View>
                </View>
                <View className='item-info'>
                  <View className='info'>
                    <Text className='op i'>{item.monthlyPay}</Text>
                    <Text className='i'>{item.education}</Text>
                    <Text className='i'>{item.recruitment}人</Text>
                    <Text className='i'>{item.technicalTitle}</Text>
                  </View>
                  <View className='btn-view'
                        onClick={this.handelRouter.bind(this, `/pages/newest/position_detail?id=${item.id}&isCollection=1`)}>
                    查看
                  </View>
                </View>
              </View>
            )
          })
          }
          {recruit.length<=0 && <View className='page-none-info'>你还没有收藏的招聘信息哦~</View>}
        </View>
    }
    else if (currentNavId === 4) {
      tpl =
        <View className='list-08'>
          {course.length>0 &&
          course.map(item => {
            return (
              <View className='list-08-item'
                    key={item.id}
                    onClick={this.handelRouter.bind(this, `/pages/business_school/detail?id=${item.id}&isCollection=1`)}>
                <Image className='item-img' src={item.courseLogoImg}/>
                <View className='info'>
                  <View className='title'>
                    {item.courseName}
                  </View>
                  <View className='old-price'>￥{item.coursePrice}</View>
                  <View className='price-wrap'>
                    <View className='price'>VIP会员 ￥
                      <Text className='big'>{item.vipCourserPrice}</Text>
                    </View>
                    <View className='num'>128学过</View>
                  </View>
                </View>
              </View>
            )
          })
          }
          {course<=0 && <View className='page-none-info'>你还没有收藏的课程哦~</View>}
        </View>
    }

    let commonTpl = <View className='newest-index collection-index'>
      <ScrollView className='scroll-view-nav' scrollX={true}>
        {
          navArr.map(item => {
            return (
              <View className={item.id === currentNavId ? 'scroll-item scroll-item-on' : 'scroll-item'}
                    onClick={this.changeNavId.bind(this, item.id)}><Text className='line'/>{item.name}</View>
            )
          })
        }
      </ScrollView>
      <View className='interval' />

      {tpl}
    </View>
    return commonTpl
  }
}

export default Personnel
